<template xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
    <transition>
        <div class="export-box">
            <header class="mui-bar mui-bar-nav mui-bar-transparent export-bgcolor immerse-margin">
                <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" @click="backRoute()"></a>
                <div class="mui-title" style="font-size: 0.3rem;font-weight: normal;">{{ $t('m.wallet.manager.keystore.listTitle') }}</div>
            </header>
            <div class="mui-slider mg-44">
                <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                    <a class="mui-control-item" :class="tab==1?'export-active':''" @click="tab=1">Keystore</a>
                    <a class="mui-control-item" :class="tab==2?'export-active':''" @click="tab=2">{{ $t('m.wallet.manager.keystore.prompt[0]') }}</a>
                </div>
                <div class="mui-slider-group">
                    <div id="item1" class="mui-slider-item mui-control-content" :class="tab==1?'mui-active':''" v-show="tab==1">
                        <div class="export-item export-bgcolor export-line">
                            <ul class="export-ul">
                                <li>
                                    <p class="export-color">{{ $t('m.wallet.manager.keystore.prompt[1]') }}</p>
                                    <p>{{ $t('m.wallet.manager.keystore.prompt[2]') }}</p>
                                </li>
                                <li>
                                    <p class="export-color">{{ $t('m.wallet.manager.keystore.prompt[3]') }}</p>
                                    <p>{{ $t('m.wallet.manager.keystore.prompt[4]') }}</p>
                                </li>
                                <li>
                                    <p class="export-color">{{ $t('m.wallet.manager.keystore.prompt[5]') }}</p>
                                    <p>{{ $t('m.wallet.manager.keystore.prompt[6]') }}</p>
                                </li>
                            </ul>
                        </div>
                        <div class="text-box">
                            <div class="textarea" contenteditable="true">{{ walletDecode.keystore }}</div>
                            <button
                                    v-clipboard:copy="walletDecode.keystore"
                                    v-clipboard:success="doClipboard"
                                    v-clipboard:error="">{{ $t('m.wallet.manager.keystore.prompt[7]') }}</button>
                        </div>
                    </div>
                    <div id="item2" class="mui-slider-item mui-control-content" :class="tab==2?'mui-active':''" v-show="tab==2">
                        <div class="export-item export-bgcolor export-line">
                            <ul class="export-ul">
                                <li>
                                    <p class="export-color">{{ $t('m.wallet.manager.keystore.prompt[8]') }}</p>
                                    <p>{{ $t('m.wallet.manager.keystore.prompt[9]') }}</p>
                                </li>
                                <li>
                                    <p class="export-color">{{ $t('m.wallet.manager.keystore.prompt[10]') }}</p>
                                    <p>{{ $t('m.wallet.manager.keystore.prompt[11]') }}</p>
                                </li>
                            </ul>
                        </div>
                        <div class="code-box" v-show="!qrCode">
                            <img src="@/assets/img/createwallet/code2.jpg" alt="" class="code">
                            <img src="@/assets/img/createwallet/showcode.png" alt="" class="code2">
                            <button class="showcode" @click="showQrcode()">{{ $t('m.wallet.manager.keystore.prompt[12]') }}</button>
                        </div>
                        <div style="width: 220px;margin: 60px auto 0;" v-show="qrCode">
                            <canvas id="canvas-keystore" @click="qrCode=false"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <alert_shot></alert_shot>
            <Alert_little></Alert_little>

        </div>
    </transition>
</template>
<script>
    import '@/assets/css/exprotkeystore.css'
    import QRCode from 'qrcode';

    export default {
        name: 'wallet_manager_keystore',
        created() {
            this.aAlert_shot({
                show: true,
                tip: this.$t('m.wallet.manager.keystore.prompt[13]'),
            });
        },
        mounted() {
        },

        data() {
            return {
                tab: 1,
                qrCode: false
            }
        },
        methods: {
            showQrcode: function () {
                this.qrCode = true;
                let canvas = document.querySelector('#canvas-keystore');
                QRCode.toCanvas(canvas, this.walletDecode.keystore, {
                    width: 220,
                    margin: 0
                }, function (error) {
                    if (error)
                        console.log(error)
                })
            },
            doClipboard: function () {
                this.aAlert_little({
                    msg: this.$t('m.wallet.manager.keystore.prompt[14]'),
                    top: "220px"
                })
            }
        }
    }
</script>
<style scoped>
    .export-box {
        background-color: #FAFBFC;
    }

    .export-box > .mui-bar-nav {
        position: initial;
    }

    .mg-44 {
        margin-top: 0;
    }

    .export-box .mui-slider {
        height: 100%;
    }

</style>
